<template>
    <div class="card-container">
        <n-card hoverable>
            <div class="text">
                输入学生学号:
            </div>
            <n-input v-model:value="studentNumber" />
            <n-button
                  type="primary"
                  size="large"
                  @click="validate"
            >
                验证
            </n-button>
        </n-card>
    </div>
</template>

<script>
export default {
    name: 'Step1',
    data() {
        return {
            studentNumber: ''
        }
    },
    methods: {
        validate() {
            if(this.studentNumber === '') {
                return
            }
            this.$emit('validateStudent', this.studentNumber)
        }
    }
}
</script>

<style scoped lang="less">
.card-container {

}
.n-card {
    width: 400px;
    height: 300px;
    .text {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .n-input {
        margin-top: 5%;
        margin-bottom: 10%;
    }
}
</style>
